<template>
  <div class="menu-list">      
    <ul>
      <li v-for= "(item,index) in title" v-bind:key="index" @click = "change($event,index)">
          {{item}}  
      </li>
    </ul>
  </div>
</template>
<script>

export default {
 
  props: ["title"],
  data() {
    return {
      
    };
  },
  methods:{
    change(event,index){
      
    this.$emit("change",index)
    }
  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../assets/scss/utiles.scss';
    .menu-list{
      width:100%;
      ul{
         height: 100%;
         width:100%;
         @include flex;
         white-space: nowrap;
         overflow: auto;
         li{
           padding:5px;
           margin-right:10px;
           background: khaki;
         }
      }
    }
</style>